<template>
  <div class="task-list-page">
    <van-sticky>
      <div class="search-bar">
        <div class="community-type"></div>
        <van-search
          v-model="communityName"
          show-action
          placeholder="请输入小区名称搜索"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="taskState" :options="option1"  @change="taskTypeChange" />
        <van-dropdown-item v-model="taskType" :options="option3"  @change="taskTypeChange" />
        <!-- <van-dropdown-item v-model="communityType" :options="option2"  @change="communityTypeChange" /> -->
        <van-dropdown-item :title="`附近${distance}公里`" ref="distanceFilter">
          <van-cell center title="距离" style="margin: 6px 0 2px">
            <template #right-icon>
              <van-slider v-model="distance" active-color="#ee0a24" :min="1" :max="10" bar-height="4px" style="width: 70%;">
                <template #button>
                  <div class="custom-step-button">{{ distance }}</div>
                </template>
              </van-slider>
            </template>
          </van-cell>
          <div style="padding: 5px 16px;">
            <div @click="onConfirm" class="confirm-btn">
              搜索
            </div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <div class="total-num">共搜索到 {{ total }} 个小区</div>
    <div class="task-list">
      <div class="list-item" v-for="item in list" :key="item.villageId" @click="communityClick(item.villageId, item.ifBdggz, item.ifSwly)">
        <div class="item-name">
          {{ item.villageName }}
          <!-- <span class="item-id">{{ item.villageId }}</span> -->
          <!-- <span class="item-type">{{ item.villageType }}</span> -->
          <span class="item-distance">{{ item.distance }}米</span>
          <span class="item-type" v-if="item.ifBdggz === '1'">八大高感知场景</span>
          <span class="item-type" v-if="item.ifSwly === '1'">公众线+商务楼宇</span>
          <span class="item-type" v-if="item.ifSwly === '2'">商务楼宇</span>
          <span class="item-type" v-if="item.mr4g != null && item.mr5g != null &&  item.mr4g < 95 && item.mr5g < 95">4G/5G弱覆盖</span>
          <span class="item-type" v-else-if="item.mr4g != null && item.mr4g < 95">4G弱覆盖</span>
          <span class="item-type" v-else-if="item.mr5g != null && item.mr5g < 95">5G弱覆盖</span>
          <span class="item-type" v-if="item.errNum > 0">任务传图异常</span>
        </div>
        <div class="item-address">地址：{{ item.villageAddr }}</div>
        <div :class="['item-status', item.state === '0' ? 'undo' : item.state === '1' ? 'doing' : 'done' ]">
          {{ item.state === '0' ? '未开始' : item.state === '1' ? '进行中' : '已完成' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCommunityList, getCommunityDkRecord } from '@/api/publicline/kdcs'
import { getCurrentLocation, regeocoderAddress } from '@/utils/geo'

export default {
  data() {
    return {
      communityName: "",
      taskState: "",
      taskType: '',
      total: 0,
      communityType: '0',
      distance: 1,
      currentLocation: [],
      option1: [
        { text: '全部状态', value: "" },
        { text: '未完成', value: 0 },
        { text: '进行中', value: 1 },
        { text: '已完成', value: 2 },
      ],
      option2: [
        { text: '全部小区', value: '' },
        { text: '开放式住宅小区', value: '开放式住宅小区' },
        { text: '封闭式住宅小区', value: '封闭式住宅小区' },
        // { text: '数智乡村', value: '2', disabled: true },
        // { text: '商务楼宇', value: '3', disabled: true },
      ],
      option3: [
        { text: '全部类型', value: "" },
        { text: '公众', value: '0' },
        { text: '公众+商务楼宇', value: '1' },
        { text: '商务楼宇', value: '2' },
      ],
      list: [],
    }
  },
  created() {
    this.getCurrentLocation();
  },
  methods: {
    getCurrentLocation() {
      getCurrentLocation( (info) => {
        const lnglat = info.split(',');
        this.currentLocation = [lnglat[0],lnglat[1]];
        this.getCommunityList();
      }, () => {
        alert( "获取经纬度失败！请确认手机是否打开定位权限或尝试重新进入。" )
      } )
    },
    onConfirm() {
      this.$refs.distanceFilter.toggle();
      this.onSearch();
    },
    onSearch() {
      this.getCommunityList();
    },
    taskTypeChange( value ) {
      console.log('--任务类型--', value);
      this.getCommunityList();
    },
    communityTypeChange( value ) {
      console.log('--小区类型--', value);
    },
    filterCommunity() {

    },
    getCommunityList() {
      const params = {
        "LATITUDE": this.currentLocation[1],
        "LONGITUDE": this.currentLocation[0],
        "DISTANCE": this.distance * 1000,
        "STATE": this.taskState,
        "TASK_TYPE": this.taskType,
        // "VILLAGE_TYPE": this.communityType,
        "VILLAGE_NAME": this.communityName
      };
      getCommunityList( params )
      .then( res => {
        const data = res.result
        this.list = data.list;
        this.total = this.list.length;
      } )
    },
    communityClick( id, ifBdggz, ifSwly ) {

      this.$router.push( { path: '/publicline/kdcs/community-dk', query: {
        communityId: id,
          ifBdggz: ifBdggz,
          ifSwly: ifSwly
      } } )
    }
  }
}
</script>

<style lang="less" scoped>
.task-list-page {
  background: #FFF;
}
.task-list {
  padding: 6px 10px;

  .list-item {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    background: url('~@/assets/imgs/publicline/board/bg-card-fz.png');
    background-size: 100% 100%;

    .item-name {
      margin-bottom: 8px;

      .item-id {
        display: inline-block;
        font-size: 12px;
        padding: 2px 6px;
        background: #409eff;
        border-radius: 4px;
        color: #fff;
        margin-left: 4px;
      }
      .item-type {
        display: inline-block;
        font-size: 12px;
        padding: 2px 6px;
        background: rgba(203,89,74,0.73);
        border-radius: 4px;
        color: #fff;
        margin-left: 4px;
      }
      .item-distance {
        padding: 3px 8px;
        background: #00ad54;
        border-radius: 3px;
        color: #FFF;
        font-size: 12px;
        margin-left: 6px;
      }
    }
    .item-address {
      color: #666;
      font-size: 13px;
    }
    .item-status {
      position: absolute;
      right: -24px;
      top: 8px;
      width: 100px;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      border: 1px solid #ccc;
      background: #FFF;
      text-align: center;
      color: #888;
      transform: rotate(34deg);

      &.doing {
        color: #0c85ff;
        border-color: #409eff;
        background: #ecf6ff;
      }
      &.done {
        color: #00ad54;
        border-color: #07c160;
        background: #deffee;
      }
    }
  }
}

.custom-step-button {
  width: 28px;
  color: #fff;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}
.confirm-btn {
  padding: 6px;
  text-align: center;
  background: #F00;
  color: #FFF;
  border-radius: 6px;
  letter-spacing: 10px;
}
.total-num {
  padding: 2px 0 0;
  // background: #fcd9ca;
  font-size: 12px;
  color: #777;
  text-align: center;
}
</style>